<template>
	<div class="mobile_footer">
		
		<template v-if="$route.path != '/mobile/booklist'">
		<router-link to="/mobile/booklist">
			<div class="icon">
				<img src="@/assets/img/mobile/booklogo2.png" />
				<p>精选</p>
			</div>
		</router-link>
		</template>
		<template v-if="$route.path == '/mobile/booklist'">
		<router-link to="/mobile/booklist">
			<div class="icon">
				<img src="@/assets/img/mobile/clicklogo2.png" />
				<p style="color: #d00000;">精选</p>
			</div>
		</router-link>
		</template>
		
		<template v-if="$route.path != '/mobile/home'">
		<router-link to="/mobile/home">
			<div class="icon">
				<img src="@/assets/img/mobile/booklogo3.png" />
				<p>发现</p>
			</div>
		</router-link>
		</template>
		<template v-if="$route.path == '/mobile/home'">
		<router-link to="/mobile/home">
			<div class="icon">
				<img src="@/assets/img/mobile/clicklogo3.png" />
				<p style="color: #d00000;">发现</p>
			</div>
		</router-link>
		</template>
		
		<template v-if="$route.path != '/mobile/bookshelf'">
		<router-link to="/mobile/bookshelf">
			<div class="icon">
				<img src="@/assets/img/mobile/booklogo4.png" />
				<p>购物车</p>
			</div>
		</router-link>
		</template>
		<template v-if="$route.path == '/mobile/bookshelf'">
			<router-link to="/mobile/bookshelf">
				<div class="icon">
					<!-- 颜色: #c22f1f -->
					<img src="@/assets/img/mobile/clicklogo4.png" />
					<p style="color: #d00000;">购物车</p>
				</div>
			</router-link>
		</template>
		
		<template v-if="$route.path != '/mobile/person'">
		<router-link to="/mobile/person">
			<div class="icon">
				<img src="@/assets/img/mobile/booklogo5.png" />
				<p>我</p>
			</div>
		</router-link>
		</template>
		<template v-if="$route.path == '/mobile/person'">
		<router-link to="/mobile/person">
			<div class="icon">
				<img src="@/assets/img/mobile/clicklogo5.png" />
				<p style="color: #d00000;">我</p>
			</div>
		</router-link>
		</template>
	</div>
</template>

<script>
	export default {
		data() {
			return {}
		},
		
	}
</script>

<style scoped>
	.mobile_footer {
		width: 100%;
		height: 3.5rem;
		background-color: #a68b5b;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.mobile_footer a {
		width: 25%;
		text-align: center;
		color: #000000;
	}

	.mobile_footer .icon img {
		width: 2rem;
		height: 2rem;
	}
</style>